<!doctype html> 
 
<html lang="en"> 
<head> 
<title>Scrollability</title> 
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<style type="text/css"> 
 
html, body {
    padding: 0;
    margin: 0;
    background: #000;
}
  
 .scrollable {
    display: inline-block;
    max-width: 1000px;
    overflow: hidden;
}

 .gallery  {
    position: relative;
    display: inline-block;
    left: 0;
    white-space: nowrap;
}

.page {
    display: inline-block;
    margin-right: 20px;
    color: #fff;
    font: 40px Helvetica;
    padding: 10px;
    -webkit-box-sizing: border-box;
    white-space: normal;
    background-color: #222;
    background-size: cover;
}

</style> 
 
<script type="text/javascript" src="/scrollability.min.js"></script>

<script language="javascript">

var colors = [
"s1.jpg",
"s2.jpg",
"s3.jpg",
"s4.jpg",
"s5.jpg"
];

addEventListener('DOMContentLoaded', function() {
    var gallery = document.querySelector('.gallery');
    for (var i = 0; i < colors.length*2; ++i) {
        var page = document.createElement('div');
        page.className = 'page';
        page.style.backgroundImage = "url(" + colors[i%colors.length] + ")";
        page.style.width = window.innerWidth + "px";
        page.style.height = window.innerHeight + "px";
        page.innerHTML = '#'+i;
        gallery.appendChild(page);
    }

    var margin = 20;
    var viewport = 320;
    var maxWidth = 1000;

    var scrollable = document.querySelector('.scrollable');
    scrollable.addEventListener("scrollability-start", function(event) {
        var pageIndex = Math.round(event.position/(viewport+margin));
        var roundOffset = pageIndex * (viewport+margin);

        var offset = -(maxWidth/2 - viewport/2) - roundOffset;
        var clipoff = (((viewport+margin))) + roundOffset;

        gallery.style.left = clipoff + "px";

        event.setSpacing(margin);
        event.setOffset(offset);
    });
});

//window.onclick = function() { location.reload(true) }

</script>
</head> 
<body><div class="scrollable horizontal paginated universal"><div class="gallery clipper"></div></div></body>
</html>
